<template>
  <div style="margin-top: 60px;overflow-y: scroll">
    <h2 style="margin: -60px auto 0;width: 200px">添加养老院信息</h2>
    <el-form style="margin-top: 50px" ref="form" :model="home" label-width="150px" label-position="left">
      <el-form-item label="养老院名称">
        <el-input
            prefix-icon="el-icon-office-building"
            clearable
            v-model="home.name"
            style="width: 40%"
            maxlength="32"
            show-word-limit
        />
      </el-form-item>
      <el-form-item label="养老院简介">
        <el-input
            type="textarea"
            v-model="home.description"
            style="width: 80%"
            clearable
            :rows="3"/>
      </el-form-item>
      <el-form-item label="养老院地址">
        <el-input
            prefix-icon="el-icon-location-outline"
            clearable
            v-model="home.address"
            style="width: 60%"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="home.createTime"
            type="date"
            format="yyyy 年 MM 月 dd 日">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="展示图片">
        <el-upload
            ref="avatar1"
            class="avatar-uploader"
            :limit="1"
            :show-file-list="false"
            style="margin-top: 10px"
            :on-change="file => uploadChange(file, true)"
            :action="'https://'+serverIp+'/details/upload'"
            :auto-upload="false"
            list-type="picture"
            :on-success="handleUpload1">
          <img v-if="upload1" :src="upload1" alt="" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="荣誉图">
        <el-upload
            ref="avatar2"
            class="avatar-uploader"
            :limit="1"
            :show-file-list="false"
            style="margin-top: 10px"
            :on-change="file => uploadChange(file, false)"
            :action="'https://'+serverIp+'/details/upload'"
            :auto-upload="false"
            list-type="picture"
            :on-success="handleUpload2">
          <img v-if="upload2" :src="upload2" alt="" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="联系人信息">
        <el-card v-if="home.contactsId" class="box-card card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>联系人：{{ contact.name }}</span>
            <span style="margin-left: 10px">性别：{{ contact.sex }}</span>
            <el-button style="float: right;margin-left: 5px" size="medium" type="danger" icon="el-icon-delete"
                       circle @click="deleteCard(true)"/>
            <el-button style="float: right" size="medium" type="primary" icon="el-icon-edit" circle
                       @click="editCard(true)"/>
          </div>
          <el-row v-if="contact.qqNumber">
            <el-col :span="7">QQ账号：</el-col>
            <el-col :span="17">{{ contact.qqNumber }}</el-col>
          </el-row>
          <el-row v-if="contact.qqEmail">
            <el-col :span="7">邮箱：</el-col>
            <el-col :span="17">{{ contact.qqEmail }}</el-col>
          </el-row>
          <el-row v-if="contact.phoneUmber">
            <el-col :span="7">电话号码：</el-col>
            <el-col :span="17">{{ contact.phoneUmber }}</el-col>
          </el-row>
          <el-row v-if="contact.wechatId">
            <el-col :span="7">微信账号：</el-col>
            <el-col :span="17">{{ contact.wechatId }}</el-col>
          </el-row>
          <el-row v-if="contact.weiboId">
            <el-col :span="7">微博账号：</el-col>
            <el-col :span="17">{{ contact.weiboId }}</el-col>
          </el-row>
          <el-row v-if="contact.wechatOfficialAccounts">
            <el-col :span="7">微信公众号：</el-col>
            <el-col :span="17">{{ contact.wechatOfficialAccounts }}</el-col>
          </el-row>
          <el-row v-if="contact.contactOnline">
            <el-col :span="7">在线热线：</el-col>
            <el-col :span="17">{{ contact.contactOnline }}</el-col>
          </el-row>
        </el-card>
        <el-button v-else @click="openDialog(true)" class="btn" icon="el-icon-user">添加联系人信息</el-button>
      </el-form-item>
      <el-form-item label="养老院价格信息">
        <el-card v-if="home.priceDetails" class="box-card card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>总费用：{{ totalCost }}</span>
            <el-button @click="deleteCard(false)" style="float: right;margin-left: 5px" size="medium" type="danger"
                       icon="el-icon-delete" circle/>
            <el-button @click="editCard(false)" style="float: right" size="medium" type="primary" icon="el-icon-edit"
                       circle/>
          </div>
          <el-row v-if="price.bedFee">
            <el-col :span="7">床位费用：</el-col>
            <el-col :span="17">{{ price.bedFee }}</el-col>
          </el-row>
          <el-row v-if="price.nursingFee">
            <el-col :span="7">护理费用：</el-col>
            <el-col :span="17">{{ price.nursingFee }}</el-col>
          </el-row>
          <el-row v-if="price.foodFee">
            <el-col :span="7">餐饮费：</el-col>
            <el-col :span="17">{{ price.foodFee }}</el-col>
          </el-row>
          <el-row v-if="price.otherFee">
            <el-col :span="7">其他费用：</el-col>
            <el-col :span="17">{{ price.otherFee }}</el-col>
          </el-row>
        </el-card>
        <el-button v-else @click="openDialog(false)" class="btn" icon="el-icon-coin">添加养老院价格信息</el-button>
      </el-form-item>
      <el-form-item label="特色服务">
        <el-input
            type="textarea"
            v-model="home.specialServices"
            style="width: 40%"
            clearable
            :rows="3"/>
      </el-form-item>
      <el-form-item style="margin-top: 50px">
        <el-button @click="addCareHome" class="btn" icon="el-icon-finished">保存并添加</el-button>
        <el-button @click="clear" type="warning" icon="el-icon-delete" class="btnWithoutColor">清空表单</el-button>
        <el-button @click="$router.push('/care-home')" type="danger" icon="el-icon-back" class="btnWithoutColor danger">返回
        </el-button>
      </el-form-item>
      <!--弹窗部分-->
      <el-dialog :visible.sync="dialog1"
                 :show-close="false"
                 :limit="1"
                 :modal-append-to-body='false'
                 :append-to-body="false"
                 @close="closeDialog(true)">
        <h2 align="center" style="color: var(--deepText);padding-top: 20px">{{ btnWord }}联系人信息</h2>
        <el-divider/>
        <div style="margin: 5% 10% 3%;padding: 3% 5% 1%">
          <el-form :model="contact" label-width="100px" label-position="left">
            <el-form-item style="margin-top: -30px" label="联系人姓名">
              <el-input
                  v-model="contact.name"
                  clearable
                  style="width: 70%"
                  maxlength="10"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="contact.sex">
                <el-radio-button :label="'男'" style="margin-right: 1px"></el-radio-button>
                <el-radio-button :label="'女'"></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="QQ账号">
              <el-input
                  v-model="contact.qqNumber"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="QQ邮箱">
              <el-input
                  v-model="contact.qqEmail"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input
                  v-model="contact.phoneUmber"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="微信账号">
              <el-input
                  v-model="contact.wechatId"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="微博账号">
              <el-input
                  v-model="contact.weiboId"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="微信公众号">
              <el-input
                  v-model="contact.wechatOfficialAccounts"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
            <el-form-item label="养老院热线" style="margin-bottom: 5px">
              <el-input
                  v-model="contact.contactOnline"
                  clearable
                  style="width: 100%"
                  maxlength="32"
                  show-word-limit
              />
            </el-form-item>
          </el-form>
        </div>
        <el-divider/>
        <div style="display: flex;flex-direction: row">
          <el-button @click="addContact" class="formBtn">{{ btnWord }}</el-button>
          <el-button @click="closeDialog(true)" class="formBtn">取消</el-button>
        </div>
      </el-dialog>
      <!--第二个弹窗-->
      <el-dialog :visible.sync="dialog2"
                 :show-close="false"
                 :limit="1"
                 :modal-append-to-body='false'
                 :append-to-body="false"
                 @close="closeDialog(false)">
        <h2 align="center" style="color: var(--deepText);padding-top: 20px">{{ btnWord }}价格信息</h2>
        <el-divider/>
        <div style="margin: 5% 10% 3%;padding: 3% 5% 1%">
          <el-form style="margin-bottom: 70px" :model="price" label-width="150px" label-position="left">
            <el-form-item label="养老院名称">
              <span>{{ home.name }}</span>
            </el-form-item>
            <el-form-item style="margin-top: 30px" label="总费用">
              <span style="color: var(--lightText)">{{ totalCost }}</span>
            </el-form-item>
            <el-form-item style="margin-top: 30px" label="床位费用 (月)">
              <el-input-number :min="0" style="width: 150px" v-model="price.bedFee" :step="100"></el-input-number>
            </el-form-item>
            <el-form-item style="margin-top: 30px" label="护理费用 (月)">
              <el-input-number :min="0" style="width: 150px" v-model="price.nursingFee" :step="100"></el-input-number>
            </el-form-item>
            <el-form-item style="margin-top: 30px" label="餐饮费用 (月)">
              <el-input-number :min="0" style="width: 150px" v-model="price.foodFee" :step="100"></el-input-number>
            </el-form-item>
            <el-form-item style="margin-top: 30px" label="其他费用 (月)">
              <el-input-number :min="0" style="width: 150px" v-model="price.otherFee" :step="100"></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <el-divider/>
        <div style="display: flex;flex-direction: row">
          <el-button @click="addPrice" class="formBtn">{{ btnWord }}</el-button>
          <el-button @click="closeDialog(true)" class="formBtn">取消</el-button>
        </div>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>


import {serverIp} from "../../../../public/config";

export default {
  name: "CareHomeData",
  data() {
    return {
      //显示的养老院信息
      home: {},
      contact: {},
      price: {},
      //add,edit,show 分别是新增、修改、展示信息
      mode: 'add',
      //本机地址
      serverIp: serverIp,
      //临时显示的图片的本地地址
      upload1: '',
      upload2: '',
      //弹窗显示
      dialog1: false,
      dialog2: false,
      //弹窗按钮文字
      btnWord: '添加'
    }
  },
  computed: {
    //计算总费用
    totalCost() {
      let bed = this.price.bedFee ? this.price.bedFee : 0
      let nursing = this.price.nursingFee ? this.price.nursingFee : 0
      let food = this.price.foodFee ? this.price.foodFee : 0
      let other = this.price.otherFee ? this.price.otherFee : 0
      return bed + nursing + food + other + ' 元/月'
    }
  },
  methods: {
    //显示上传的封面
    uploadChange(file, b) {
      const reader = new FileReader() // 创建FileReader对象
      reader.readAsDataURL(file.raw) // 读取选择的文件的数据
      reader.onload = () => {
        if (b) {
          this.upload1 = reader.result; // 将文件的本地路径保存到data属性中
        } else {
          this.upload2 = reader.result; // 将文件的本地路径保存到data属性中
        }
      }
    },
    //上传封面
    handleUpload1(res) {
      if (res.code !== '200') {
        this.$notify({
          title: '展示图片上传失败',
          message: res.msg,
          type: 'error'
        })
      } else {
        //将返回的封面路径存入对象
        this.home.imageGallery = res.msg
      }
    },
    handleUpload2(res) {
      if (res.code !== '200') {
        this.$notify({
          title: '荣誉图上传失败',
          message: res.msg,
          type: 'error'
        })
      } else {
        //将返回的封面路径存入对象
        this.home.honors = res.msg
      }
    },
    //清空表单信息
    clear() {
      this.home = {}
      this.price = {}
      this.contact = {}
      this.upload1 = ''
      this.upload2 = ''
    },
    //打开弹窗
    openDialog(b) {
      if (b) {
        this.dialog1 = true
      } else {
        this.dialog2 = true
      }
      this.btnWord = '添加'
    },
    //关闭弹窗
    closeDialog(b) {
      if (this.btnWord === '添加') {
        if (b) {
          if (!this.home.contactsId) {
            this.contact = {}
          }
        } else {
          if (!this.home.priceDetails) {
            this.price = {}
          }
        }
      }
      this.dialog1 = false
      this.dialog2 = false
    },
    //添加价格和联系方式
    addPrice() {
      if (!this.home.priceDetails) {
        this.home.priceDetails = '1'
      }
      this.dialog2 = false
    },
    addContact() {
      if (!this.home.contactsId) {
        this.home.contactsId = '1'
      }
      this.dialog1 = false
    },
    //编辑和删除操作
    editCard(b) {
      if (b) {
        this.dialog1 = true
      } else {
        this.dialog2 = true
      }
      this.btnWord = "修改"
    },
    deleteCard(b) {
      if (b) {
        this.home.contactsId = null
        this.contact = {}
      } else {
        this.home.priceDetails = null
        this.price = {}
      }
    },
    //添加养老院数据
    addCareHome() {
      //先提交图片
      if (this.upload1 !== '') {
        this.$refs.avatar1.submit()
      }
      if (this.upload2 !== '') {
        this.$refs.avatar2.submit()
      }
      //先保存养老院信息
      this.request.post('/details/add', this.home).then(res => {
        if (res.code === '200') {
          this.$notify({
            type: 'success',
            title: '保存成功',
            message: '养老院信息已保存'
          })
          //成功后将id分配给价格和联系方式
          this.contact.contactId = res.msg
          this.price.careHomeId = res.msg
          this.home.id = res.msg
          //再提交联系人信息和价格信息
          this.submitContactAndPrice()
        } else {
          this.$notify({
            type: 'error',
            title: '养老院信息保存失败',
            message: res.msg
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '养老院信息保存失败',
          message: err
        })
      })
    },
    //更新养老院信息
    updateDetails() {
      this.request.put('/details/edit', this.home).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '养老院信息更新失败',
            message: res.msg
          })
        } else {
          //保存成功
          this.clear()
          this.$router.push('/care-home')
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '养老院信息更新失败',
          message: err
        })
      })
    },
    //提交联系人和价格信息
    submitContactAndPrice() {
      //添加
      this.request.post('/contacts/add', this.contact).then(res => {
        if (res.code !== '200') {
          this.$notify({
            type: 'error',
            title: '联系人信息保存失败',
            message: res.msg
          })
        } else {
          this.home.contactsId = res.msg
          this.request.post('/price-details/add', this.price).then(res => {
            if (res.code !== '200') {
              this.$notify({
                type: 'error',
                title: '价格信息保存失败',
                message: res.msg
              })
            } else {
              this.home.priceDetails = res.msg
              this.updateDetails()
            }
          }).catch(err => {
            this.$notify({
              type: 'error',
              title: '价格信息保存失败',
              message: err
            })
          })
        }
      }).catch(err => {
        this.$notify({
          type: 'error',
          title: '联系人信息保存失败',
          message: err
        })
      })

      // //更新
      // this.request.put('/contacts/edit', this.contact).then(res => {
      //   if (res.code !== '200') {
      //     this.$notify({
      //       type: 'error',
      //       title: '联系人信息更新失败',
      //       message: res.msg
      //     })
      //   }
      // }).catch(err => {
      //   this.$notify({
      //     type: 'error',
      //     title: '联系人信息更新失败',
      //     message: err
      //   })
      // })
      // this.request.put('/price-details/edit', this.price).then(res => {
      //   if (res.code !== '200') {
      //     this.$notify({
      //       type: 'error',
      //       title: '价格信息更新失败',
      //       message: res.msg
      //     })
      //   }
      // }).catch(err => {
      //   this.$notify({
      //     type: 'error',
      //     title: '价格信息更新失败',
      //     message: err
      //   })
      // })
    }
  },
  mounted() {
    //获取传递的数据
    this.mode = this.$route.query.mode
  },

}
</script>

<style scoped>
/*输入框样式*/

>>> .el-input__inner, >>> .el-textarea__inner {
  color: var(--deepText);
  background-color: var(--inputBg);
  border: solid 1px var(--inputBorder) !important;
  border-radius: 5px;
}

>>> .el-input__inner:focus, >>> .el-textarea__inner:focus {
  border: var(--btn) 1px solid !important;
}

>>> .el-date-editor .el-input__inner::placeholder {
  color: var(--lightText);
  padding-left: 10px;
}

>>> .el-input__icon {
  color: var(--deepText);
}

/*日期选择器样式*/
>>> .el-date-editor .el-input__inner {
  cursor: pointer;
}

/*按钮式单选框*/

>>> .el-radio-button__inner {
  background-color: var(--lightBg) !important;
  color: var(--deepText) !important;
  border: none !important;
}

>>> .is-active .el-radio-button__inner {
  background-color: var(--btn) !important;
  color: var(--btnText) !important;
  border: none !important;
  box-shadow: none;
}

/*表单label样式*/
>>> .el-form-item__label {
  color: var(--deepText);
}


/*表单按钮样式*/
.formBtn {
  color: var(--btnText);
  margin: 20px auto;
  width: 140px;
  height: 40px;
  font-size: 14px;
}

>>> .el-button--default {
  font-size: 13px;
  font-weight: bold;
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
  transition: 0.2s;
}

>>> .el-button--default:hover {
  background-color: var(--btnActive);
}


/*输入框内部*/
>>> .el-input__count-inner {
  background-color: var(--inputBg) !important;
  color: var(--lightText) !important;
}

/*封面上传*/
.avatar-uploader-icon {
  font-size: 30px;
  color: var(--lightText);
  width: 180px;
  height: 170px;
  line-height: 170px;
}

.avatar {
  height: auto;
  width: 100%;
  object-fit: scale-down;
  margin-bottom: -10px;
  border-radius: 5px;
}

.avatar-uploader {
  width: 180px !important;
  border: 1px dashed var(--inputBorder) !important;
  border-radius: 5px;
  background-color: var(--lightBg);
}

.avatar-uploader:hover {
  border-color: var(--btn) !important;
}

.avatar-uploader:hover .avatar-uploader-icon {
  color: var(--btn);
}

::-webkit-scrollbar {
  overflow: auto;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--th);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--lightText);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: var(--deepBg);
  border-radius: 5px;
}

/*卡片*/
.card {
  width: 400px;
  background-color: var(--lightBg);
  border: 1px solid var(--inputBorder);
  color: var(--deepText);
}

>>> .el-card__header {
  border-color: var(--deepText);
}

.btn {
  background-color: var(--btn);
  color: var(--btnText);
  padding: 10px 20px;
  border: none;
  transition: 0.2s;
}

.btn:hover {
  background-color: var(--btnActive);
}

.btnWithoutColor {
  padding: 10px 20px;
  border: none;
  transition: 0.2s;
  font-weight: bold;
  font-size: 13px;
}

/*弹窗样式*/
>>> .el-dialog {
  background-color: var(--lightBg);
  border-radius: 10px;
  height: 650px;
  width: 700px;
  margin-top: calc(25% - 300px) !important;
}

>>> .el-dialog__body {
  height: 100%;
  padding: 0;
}

>>> .el-dialog__header {
  height: 0;
  padding: 0;
}

>>> .el-dialog__wrapper {
  transition-duration: 0.3s;
}

>>> .dialog-fade-enter-active {
  animation: none !important;
}

>>> .dialog-fade-leave-active {
  transition-duration: 0.15s !important;
  animation: none !important;
}

>>> .dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog {
  animation-fill-mode: forwards;
}

>>> .dialog-fade-enter-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-open;
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

>>> .dialog-fade-leave-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-close;
}

@keyframes anim-open {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
}

/*分割线*/
>>> .el-divider {
  background-color: var(--divider);
  width: 90%;
  height: 2px;
  margin: auto;
}

/*计数器样式*/
>>> .el-input-number__decrease, >>> .el-input-number__increase {
  background-color: var(--btn);
  color: var(--btnText);
  border: none;
}

>>> .el-input-number__decrease:hover, >>> .el-input-number__increase:hover {
  background-color: var(--btnActive);
  color: var(--btnText);
}

.danger{
  background-color: var(--danger);
}
.danger:hover{
  background-color: var(--dangerHover);
}
</style>